/**
 * 企业成员列表页面
 */

'use client';

import React, { useState, useCallback, useEffect } from 'react';
import { Layout, Space, Button, message, Typography } from 'antd';
import {
  TeamOutlined,
  ExportOutlined,
  ArrowLeftOutlined,
} from '@ant-design/icons';
import Link from 'next/link';
import { Member, MemberQueryParams } from '../../types/member';
import { useMembers } from '../../hooks/useMembers';
import MemberQueryForm from '../../components/MemberQueryForm';
import MemberTable from '../../components/MemberTable';
import MemberDetailModal from '../../components/MemberDetailModal';

const { Header, Content } = Layout;
const { Title } = Typography;

export default function MembersPage() {
  const [queryParams, setQueryParams] = useState<MemberQueryParams>({
    page_index: 1,
    page_size: 10,
  });
  const [selectedMember, setSelectedMember] = useState<Member | null>(null);
  const [detailModalVisible, setDetailModalVisible] = useState(false);

  const { members, loading, total, fetchMembers, statistics } = useMembers();

  // 组件加载时获取初始数据
  useEffect(() => {
    fetchMembers(queryParams);
  }, []);

  const handleSearch = useCallback((params: MemberQueryParams) => {
    const newParams = { ...params, page_index: 0 }; // 搜索时重置为第一页（0-based）
    setQueryParams(newParams);
    fetchMembers(newParams);
  }, [fetchMembers]);
  
  const handlePageChange = useCallback((page: number, pageSize?: number) => {
    const newParams = {
      ...queryParams,
      page_index: page - 1, // 转换为0-based索引
      page_size: pageSize || queryParams.page_size || 10,
    };
    setQueryParams(newParams);
    fetchMembers(newParams);
  }, [queryParams, fetchMembers]);
  
  const handleViewMember = useCallback((member: Member) => {
    setSelectedMember(member);
    setDetailModalVisible(true);
  }, []);
  
  const handleEditMember = useCallback((member: Member) => {
    message.info(`编辑成员: ${member.display_name}`);
  }, []);
  
  const handleDeleteMember = useCallback((member: Member) => {
    message.info(`删除成员: ${member.display_name}`);
  }, []);
  
  const handleExportMembers = useCallback(() => {
    message.info('导出成员列表功能开发中...');
  }, []);
  
  const handleCloseDetailModal = useCallback(() => {
    setDetailModalVisible(false);
    setSelectedMember(null);
  }, []);
  
  return (
    <Layout style={{ minHeight: '100vh', background: '#f5f5f5' }}>
      <Header style={{ background: '#fff', padding: '0 24px', borderBottom: '1px solid #f0f0f0' }}>
        <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
          <Link href="/" style={{ marginRight: '16px' }}>
            <Button type="text" icon={<ArrowLeftOutlined />}>
              返回首页
            </Button>
          </Link>
          <Title level={3} style={{ margin: 0, flex: 1 }}>
            <TeamOutlined style={{ marginRight: '8px', color: '#1890ff' }} />
            企业成员管理
          </Title>
          <Space>
            <Button
              type="primary"
              icon={<ExportOutlined />}
              onClick={handleExportMembers}
            >
              导出成员
            </Button>
          </Space>
        </div>
      </Header>
      
      <Content style={{ padding: '24px' }}>
        <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
          <Space direction="vertical" size="large" style={{ width: '100%' }}>
            {/* 查询表单 */}
            <MemberQueryForm
              onSearch={handleSearch}
              loading={loading}
            />
            
            {/* 成员列表 */}
            <MemberTable
              members={members}
              loading={loading}
              total={total}
              current={(queryParams.page_index || 0) + 1}
              pageSize={queryParams.page_size || 30}
              onView={handleViewMember}
              onEdit={handleEditMember}
              onDelete={handleDeleteMember}
              onPageChange={handlePageChange}
              queryParams={queryParams}
            />
          </Space>
        </div>
      </Content>
      
      {/* 成员详情模态框 */}
      <MemberDetailModal
        member={selectedMember}
        visible={detailModalVisible}
        onClose={handleCloseDetailModal}
        onEdit={handleEditMember}
        onDelete={handleDeleteMember}
      />
    </Layout>
  );
}